<template>
	<view>
		<image class="bg" mode="widthFix" src="@/static/imgs/head45.png"></image>
		<view class="cantainer">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<uni-search-bar v-model="deviceName" style="padding: 10px 0;" radius="20" @confirm="search"
			 @cancel="clear" cancelText="重置" placeholder="请输入关键字"></uni-search-bar>
			<view v-for="i in list" :key="i.id" @click="detail(i)">
				<listWarn :info="i"/>
			</view>
			<view v-if="!list.length" class="kong">暂无数据</view>
			<view v-if="last && list.length" class="last">已经到底了</view>

		</view>
		<view></view>
	</view>
</template>

<script>
import listWarn from '@/components/listWarn.vue';
export default {
	components: { listWarn },
	data() {
		return {
			last: false,
			deviceName: '',
			page: 1,
			list: [],
		};
	},
	onShow() {
		this.list = [];
		this.last = false;
		this.page = 1;
		this.getList()
	},
	onReachBottom() {
		setTimeout(()=>this.loadmore(), 1000)
	},
	methods: {
		clear() {
			this.list = [];
			this.page = 1;
			this.deviceName = '';
			this.getList();
		},
		search() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		loadmore() {
			if(this.last) return;
			this.page += 1;
			this.getList();
		},
		detail(i) {
			// uni.navigateTo({
			// 	url: `/pages/warn?id=${i.id}`
			// });
		},
		getList() {
			this.$axios({
				method: 'get',
				url: `/senor/warn/applist?pageNum=${this.page}&pageSize=10&driverName=${this.deviceName}`,
				data: {
					page: 1,
					size: 10
				},
			}).then(res => {
				this.list = this.list.concat(res.rows);
				if(this.list.length>=res.total) {
					this.last = true;
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.mr20 {
	margin-right: 20px;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>